<template>
    <!-- 组件文件 -->
    <!-- 该文件包含三部分的代码
          template、script、style
       其实就是对应了传统 Web "三剑客"
           HTML、JavaScript、CSS。
  -->
    <div id="app">
        <nav>
            <div class="container">
                <ul class="nav_left">
                    <li>
                        <router-link to="/">Home</router-link>
                    </li>
                    <li>
                        <router-link to="/admin">Admin</router-link>
                    </li>
                    <li>
                        <router-link to="/cart">Cart</router-link>
                    </li>
                </ul>
            </div>
        </nav>

        <!-- 然后显示此刻渲染的路由组件：<router-view /> -->
        <router-view />
    </div>
</template>

<script>
// 主要是导出了一个名为 App 的组件
export default {
    name: 'App'
}
// 组件中涉及的代码较多时，我们需要把 script 和 style 抽成独立的 .js 和 .css 文件
</script>

<style>
/* CSS 代码 */
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
